import React from 'react';
import {
  View,
  Text,
  Image,
  TextInput,
  TouchableOpacity,
  StyleSheet,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';

type RootStackParamList = {
  Home: undefined;
  SearchHot: undefined;
  Login: undefined;
};

type TopBarProps = {
  leftContent?: React.ReactNode | (() => React.ReactNode);
  middleContent?: React.ReactNode | (() => React.ReactNode);
  rightContent?: React.ReactNode | (() => React.ReactNode);
  backgroundColor?: string;
  fontColor?: string;
  onMenuPress?: () => void;
  onSearchChange?: (text: string) => void;
  onLoginPress?: () => void;
};

const NavBar: React.FC<TopBarProps> = ({
  leftContent,
  middleContent,
  rightContent,
  backgroundColor = '#f44c45',
  fontColor = '#ffffff',
  onMenuPress,
  onSearchChange,
  onLoginPress,
}) => {
  const navigation = useNavigation();

  const renderLeft = () => {
    if (typeof leftContent === 'function') {
      return leftContent();
    }
    if (leftContent) {
      return leftContent;
    }
    return (
      <TouchableOpacity onPress={onMenuPress || (() => navigation.goBack())}>
        <Image
          source={{
            uri: '',
          }}
          style={styles.menuIcon}
          resizeMode="contain"
        />
      </TouchableOpacity>
    );
  };

  const renderMiddle = () => {
    if (typeof middleContent === 'function') {
      return middleContent();
    }
    if (middleContent) {
      return middleContent;
    }
    return (
      <View style={styles.searchContainer}>
        <TextInput
          placeholder="新人活动0.01"
          placeholderTextColor="#ccc"
          style={[styles.searchInput, { color: fontColor }]}
          onChangeText={onSearchChange}
          onSubmitEditing={() => navigation.navigate('SearchHot' as never)}
        />
      </View>
    );
  };

  const renderRight = () => {
    if (typeof rightContent === 'function') {
      return rightContent();
    }
    if (rightContent) {
      return rightContent;
    }
    return (
      <TouchableOpacity
      // onPress={onLoginPress || (() => navigation.navigate('Login' as never))}
      >
        <Text style={[styles.text, { color: fontColor }]}>登录</Text>
      </TouchableOpacity>
    );
  };

  return (
    <View style={[styles.container, { backgroundColor }]}>
      <View style={styles.left}>{renderLeft()}</View>
      <View style={styles.middle}>{renderMiddle()}</View>
      <View style={styles.right}>{renderRight()}</View>
    </View>
  );
};

export default NavBar;

// 样式
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    height: 60,
    paddingHorizontal: 10,
    alignItems: 'center',
  },
  left: { flex: 1 },
  middle: { flex: 6, alignItems: 'center' },
  right: { flex: 1, alignItems: 'flex-end' },
  menuIcon: {
    width: 20,
    height: 20,
    resizeMode: 'contain',
  },
  searchContainer: {
    width: '90%',
    height: 30,
    borderRadius: 15,
    backgroundColor: '#fff',
    paddingHorizontal: 10,
    justifyContent: 'center',
    alignItems: 'center',
    overflow: 'hidden',
  },
  searchInput: {
    flex: 1,
    fontSize: 16,
    paddingVertical: 5,
    paddingHorizontal: 10,
    borderRadius: 15,
  },
  text: {
    fontSize: 18,
  },
});
